<template>
  <!-- 预警动态 -->
  <div class="EarlyWarningDynamics">
    <div class="title">
      <Title> 预警动态 </Title>
    </div>
    <div class="body">
      <table
        style="
          border-collapse: separate;
          border-spacing: 0px 0.27375rem;
          word-wrap: break-word;
          word-break: break-all;
        "
      >
        <thead>
          <tr>
            <th class="one">告警类型</th>
            <th>设备名称</th>
            <th>设备IP</th>
            <th>时间</th>
          </tr>
        </thead>
        <tbody v-scroll>
          <tr class="info" v-for="item in DATA">
            <td>
              <div class="typeback">{{ item.type }}</div>
            </td>
            <td>{{ item.sos_name }}</td>
            <td>{{ item.sos_ip }}</td>
            <td>{{ item.createtime }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
import Title from "./Title.vue";
import { sosLog } from "@/api/dashboard";
export default {
  components: {
    Title,
  },
  mounted() {
    this.Select();
  },
  data() {
    return {
      DATA: [],
    };
  },
  methods: {
    async Select(type) {
      let { data: res } = await sosLog({
        page: this.currentPage,
      });
      // this.DATA = [];
      this.total = Number(res.total);
      res.list.forEach((e) => {
        let item = {
          type: "故障",
          sos_name: e.sos_name,
          createtime: e.createtime.slice(0, 10),
          sos_ip: e.sos_ip.slice(0, 12),
        };
        this.DATA.push(item);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}
.EarlyWarningDynamics {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .title {
    width: 100%;
    flex: 1;
  }
  .body {
    width: 100%;
    flex: 6;

    table {
      width: 4.850375rem /* 388.03/80 */;
      table-layout: fixed;
      border-collapse: collapse;
      tbody {
        display: block;
        //width: calc(100% + 8px); /*这里的8px是滚动条的宽度*/
        height: 2.75rem;
        width: 4.9875rem;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
      }
      th {
        // margin-left: .55975rem /* 44.78/80 */;
        color: #b1acac;
        font-size: 0.1835rem /* 14.68/80 */;
        width: 0.725rem /* 58/80 */;
      }
      td {
        font-size: 0.1835rem /* 14.68/80 */;
        color: rgba(255, 255, 255, 1);
        text-align: center;
        width: 1.1875rem;
      }
      .info {
        margin-top: 0.27375rem /* 21.9/80 */;
      }
      .typeback {
        width: 0.681625rem /* 54.53/80 */ !important;
        color: rgba(224, 66, 54, 1);
        background: url(../../../assets/Home/redjuxing.png);
        margin: auto;
      }
      .one {
        margin-left: 0px;
      }
    }
  }
}
</style>
